<template>
	<view class="go-back">
		<view git class="back-icon" @click="goBack"></view>
		<view class="title">宠物档案</view>
	</view>
	<view v-if="Object.keys(info).length != 0">
		<view class="user-info">
			<view class="avatar"></view>
			<view class="uname">用户1735542835</view>
		</view>
		<view class="dn-content">
			<view class="dn-head">
				<view class="dn-tag"></view>
			</view>
			<view class="base-info">
				<view class="hxz"></view>
				<view class="info-box">
					<view class="left-box">
						<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="cover"></image>
					</view>
					<view class="right-box">
						<view class="name"><view class="big-box">德芙</view>（猫猫）</view>
						<view class="info-item"><view class="title">性别：</view>MM</view>
						<view class="info-item"><view class="title">年龄：</view>1年6个月</view>
						<view class="info-item"><view class="title">品种：</view>曼基康</view>
						<view class="info-item"><view class="title">体重：</view>5kg</view>
						<view class="info-item"><view class="title">已绝育</view></view>
						<view class="sbtn">
							<image class="icon" src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-s-icon.png"></image>
							<view class="text">安全认证</view>
						</view>
					</view>
				</view>
			</view>
			<view class="desc">
				<view class="title">自我介绍</view>
				<view class="text">老师帮我看看，我家孩子能当童模吗，孩子从小就聪明。十天会走路，一个月会唱歌。</view>
			</view>
			<view class="album">
				<view class="title">萌宠相册</view>
				<view class="img-list">
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
					<image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/test.jpeg" class="item"></image>
				</view>
			</view>
		</view>
	</view>
    <view class="empty-box" v-else>
		<view class="empty-img"></view>
		<view class="empty-text">快为你的爱宠创建专属档案吧</view>
		<view class="create-btn" @click="create"><image src="https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-add.png" class="add-icon"></image>创建档案</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
				}
			}
		},
		methods: {
			//返回
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			create() {
				uni.navigateTo({
					url: '/pages/mine/createCwdn'
				});
			}
		}
	}
</script>
<style>
page {
	background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn_bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color:#FFF;
}
</style>
<style scoped lang="scss">
	.dn-content {
		overflow: hidden;
		.dn-head {
			position: relative;
			width: 100%;
			height:130rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-head.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
			z-index:2;
			margin-top:66rpx;
		    .dn-tag{
				position: absolute;
				width: 76rpx;
				height: 66rpx;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-tag.png);
				background-size: 100% auto;
				background-repeat: no-repeat;
				z-index:1;
				left: 72rpx;
				top:-64rpx;
			}
		}
		.base-info{
			position: relative;
			width: 686rpx;
			height: 452rpx;
			background: #F7FFFF;
			border-radius: 24rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-wrz.png);
			background-size: 100% auto;
			background-repeat: no-repeat;
			margin:0 auto;
			.hxz{
				position: absolute;
				width:72rpx;
				height: 100rpx;
				z-index:99;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-hxz.png);
				background-size: 100% auto;
				background-repeat: no-repeat;
				top:-50rpx;
			}
			.info-box{
				.left-box{
					width: 268rpx;
					height: 380rpx;
					float: left;
					margin-top:24rpx;
					margin-left: 24rpx;
					.cover{
						width: 268rpx;
						height: 380rpx;
					}
				}
				.right-box{
					float: left;
					margin-left: 24rpx;
					margin-top:24rpx;
					.name{
						width: 290rpx;
						height: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #7B7B7B;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-bottom: 28rpx;
						.big-box{
							display: inline-block;
							height: 40rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #262626;
							line-height: 40rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
					.info-item{
						width: auto;
						height: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #7B7B7B;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-bottom: 18rpx;
						margin-left: 16rpx;
						.title{
							display: inline-block;
							width: 78rpx;
							height: 32rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 26rpx;
							color: #262626;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
					.sbtn{
						width: 254rpx;
						height: 68rpx;
						background: linear-gradient( 185deg, #F1E0FF 0%, #4FE3D1 30%, #28D6D6 45%, #08C0CC 92%);
						border-radius: 40rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #FFFFFF;
						text-align: center;
						font-style: normal;
						text-transform: none;
						margin-top:18rpx;
						overflow: hidden;
						.icon{
							display: block;
							width: 30rpx;
							height: 30rpx;
							margin-top:19rpx;
							margin-left:60rpx;
							float: left;
							
						}
						.text{
							display: inline-block;
							width: 104rpx;
							height: 32rpx;
							float: left;
							margin-top:16rpx;
						}
					}
				}
			}
		}
		.desc{
			width: 638rpx;
			margin:0 auto;
			margin-top:40rpx;
			overflow: hidden;
			.title{
				width: 120rpx;
				height: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 12rpx;
			}
			.text{
				width: 638rpx;
				height: 78rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7B7B7B;
				line-height: 39rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.album{
			width: 648rpx;
			margin:0 auto;
			margin-top:40rpx;
			margin-bottom: 40rpx;
			overflow: hidden;
			.title{
				width: 120rpx;
				height: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			.img-list{
				margin-top:32rpx;
				.item{
					display: block;
					width: 208rpx;
					height: 208rpx;
					border-radius: 8rpx;
					margin-right:8rpx;
					margin-bottom:8rpx;
					float: left;
				}
			}
		}
	}
	.user-info{
		overflow: hidden;
		.avatar{
			display: block;
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			float: left;
			border: 4rpx solid #FFFFFF;
			margin-left: 40rpx;
			margin-top:192rpx;
		}
		.uname{
			display: block;
			width: 250rpx;
			height: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #262626;
			text-align: left;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-left: 32rpx;
			margin-top:208rpx;
		}
	}
	.empty-box {
		overflow: hidden;
		.empty-img {
			width: 232rpx;
			height: 180rpx;
			margin: 0 auto;
			background-image: url('https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn_empty.png');
			background-size: 100% auto;
			background-repeat: no-repeat;
			margin-top:668rpx;
		}
		.empty-text {
			width: 192rpx;
			height: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin:0 auto;
			margin-top:24rpx;
		}
		.create-btn {
			width: 562rpx;
			height: 96rpx;
			margin: 0 auto;
			background-image: url('https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/cwdn-btn.png');
			background-size: 100% auto;
			background-repeat: no-repeat;
			margin-top:66rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			.add-icon{
				display: inline-block;
				width:20rpx;
				height:20rpx;
				padding-right:8rpx;
			}
		}
	}
	.go-back{
		position: fixed;
		width:100%;
		height: 88rpx;
		overflow: hidden;
		z-index:999;
		top:88rpx;
		.back-icon{
			width: 64rpx;
			height: 64rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/back.png);
			background-size: 100% 100%;
			float: left;
			margin-left:18rpx;
			margin-top:16rpx;
		}
		.title{
			width: 500rpx;
			height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			line-height: 42rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-top:28rpx;
			overflow: hidden;
		}
	}
</style>
